/* eslint-disable react/boolean-prop-naming */
import { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { IconC } from '@/src/components';
import styles from './sceneCard.less';
import { Checkbox, Tooltip } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';

const SceneCardC = (props) => {
  const {
    width = '100%', // 宽度取父组件宽度
    height = 'auto', // 高度自适应
    initOpen = true, // 默认展开
    title = '', // 名称
    tooltip = '', // 问号提示
    showChecked = false, // 是否展示复选框
    showMove = false, // 是否展示上下移动图标
    showAdd = false, // 是否展示新增按钮
    id, // 卡片唯一id
    content, // 内容
    upDisabled = false, // 上移 禁用
    downDisbled = false, // 下移禁用
    moveChange = () => {}, // 上下移动事件
    changePanel = () => {}, // 展开收起事件
    onChecked = () => {}, // 选中与否事件
    onClickAdd = () => {}, // 新增事件
    checked, // 父组件控制复选框
    style, // 样式
    isContainCheckGroup = false, // 是否是 <Checkbox.Group />包裹，如果是则Checkbox的选中事件会影响受控
  } = props;
  const [open, setOpen] = useState(initOpen); // 是否展开
  const [myChecked, setMyChecked] = useState(checked); // 是否选中
  // 展开收起事件
  const handleClick = () => {
    setOpen(!open);
    changePanel(!open); // 抛给父组件
  };
  // 复选框变化事件
  const handleChecked = (e) => {
    onChecked(e.target.checked, id); // 抛给父组件
  };
  // 上移下移事件
  const handleMove = (type) => {
    if (type === 'up') {
      if (upDisabled) return null; // 禁用状态下不继续处理
    } else {
      if (downDisbled) return null; // 禁用状态下不继续处理
    }
    moveChange(type, id); // 抛给父组件
  };
  // 更新checked值 checked值由父组件控制
  useEffect(() => {
    setMyChecked(checked);
  }, [checked]);
  const iconStyle = open ? { transform: 'rotate(180deg)' } : { transform: 'rotate(0deg)' };

  return (
    <div className={styles.CardC} style={{ width, height, ...style }}>
      <div className={styles.topTitle}>
        <IconC onClick={handleClick} type={'arrowBlueDown'} style={iconStyle} />
        <div style={{ margin: '0 10px', marginLeft: showChecked ? '10px' : '0px' }}>
          {showChecked ? isContainCheckGroup ? <Checkbox checked={myChecked} value={id} /> : <Checkbox checked={myChecked} onChange={handleChecked} value={id} /> : null}
        </div>
        <div className={styles.title}>{title}</div>
        <div className={styles.tooltip}>
          {tooltip ? (
            <Tooltip title={tooltip}>
              <QuestionCircleOutlined />
            </Tooltip>
          ) : null}
        </div>
        {showMove ? (
          <div className={styles.move}>
            <IconC type={'oneArrowUp'} onClick={() => handleMove('up')} isDisabled={upDisabled} />
            <IconC type={'oneArrowDown'} onClick={() => handleMove('down')} isDisabled={downDisbled} />
          </div>
        ) : null}
        {showAdd ? (
          <div className={styles.move}>
            <IconC
              type={'addBlueNew'}
              onClick={() => {
                // 点击新增 则展开
                if (!open) setOpen(true);
                onClickAdd(id);
              }}
              iconType={'original'}
              isSelect={true}
              style={{ margin: 0, marginTop: '-4px' }}
            />
          </div>
        ) : null}
      </div>
      <div className={styles.content} style={{ display: open ? 'inherit' : 'none' }}>
        {content}
      </div>
    </div>
  );
};
SceneCardC.propTypes = {
  width: PropTypes.string, // 宽度取父组件宽度
  height: PropTypes.string, // 高度自适应
  initOpen: PropTypes.bool, // 默认展开
  title: PropTypes.string, // 名称
  tooltip: PropTypes.any, // 问号提示
  showChecked: PropTypes.bool, // 是否展示复选框
  showMove: PropTypes.bool, // 是否展示上下移动图标
  showAdd: PropTypes.bool, // 是否展示新增按钮
  id: PropTypes.string, // 卡片唯一id
  content: PropTypes.any, // 内容
  upDisabled: PropTypes.bool, // 上移 禁用
  downDisbled: PropTypes.bool, // 下移禁用
  moveChange: PropTypes.func, // 上下移动事件
  changePanel: PropTypes.func, // 展开收起事件
  onChecked: PropTypes.func, // 选中与否事件
  onClickAdd: PropTypes.func, // 新增事件
  isContainCheckGroup: PropTypes.bool, // 是否是 <Checkbox.Group />包裹，如果是则Checkbox的选中事件会影响受控
};
export default SceneCardC;
